<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Climate Visualization</title>
<link href="/stylesheets/common.css" rel="stylesheet" type="text/css" />
 <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=visualization"></script>
    <script>
      // Adding 500 Data Points
      var map, pointarray, heatmap;

      var taxiData = [
        new google.maps.LatLng(37.782551, -122.445368),new google.maps.LatLng(36.782551, -122.445368),new google.maps.LatLng(37.782551, -121.445368)];

      function initialize() {
        var mapOptions = {
          zoom: 13,
          center: new google.maps.LatLng(37.774546, -122.433523),
          mapTypeId: google.maps.MapTypeId.ROADMAP        };

        map = new google.maps.Map(document.getElementById('map_canvas'),
            mapOptions);

        pointArray = new google.maps.MVCArray(taxiData);

        heatmap = new google.maps.visualization.HeatmapLayer({
          data: pointArray
        });

        heatmap.setMap(map);
		//alert('map: '+map);
      }

      function toggleHeatmap() {
        heatmap.setMap(heatmap.getMap() ? null : map);
      }

      function changeGradient() {
        var gradient = [
          'rgba(0, 255, 255, 0)',
          'rgba(0, 255, 255, 1)',
          'rgba(0, 191, 255, 1)',
          'rgba(0, 127, 255, 1)',
          'rgba(0, 63, 255, 1)',
          'rgba(0, 0, 255, 1)',
          'rgba(0, 0, 223, 1)',
          'rgba(0, 0, 191, 1)',
          'rgba(0, 0, 159, 1)',
          'rgba(0, 0, 127, 1)',
          'rgba(63, 0, 91, 1)',
          'rgba(127, 0, 63, 1)',
          'rgba(191, 0, 31, 1)',
          'rgba(255, 0, 0, 1)'
        ]
        heatmap.setOptions({
          gradient: heatmap.get('gradient') ? null : gradient
        });
      }

      function changeRadius() {
        heatmap.setOptions({radius: heatmap.get('radius') ? null : 20});
      }

      function changeOpacity() {
        heatmap.setOptions({opacity: heatmap.get('opacity') ? null : 0.2});
      }
    </script>
</head>
<body onload="initialize()">
	<div id="container">
		<div id="containertop"></div>
		<!-- Header -->
		<h1><a href="#" >Climate Visualization</a></h1>
		<hr />
		<div id="navigation_wrapper">
			<!-- Top Navigation -->
			<ul id="navigation">
				<li><a href="#" title="Home">Project Summary</a></li>
				<li><a href="#" title="Portofolio">Heat Map</a></li>
				<li><a href="#" title="Contact">About Us</a></li>
				<li><a href="#" title="History">Contact US</a></li>
				<li><a href="#" title="History">News</a></li>
			</ul>
			<!-- Search Field -->
			<fieldset id="search_wrapper">
				<form action="#">
					<input type="text" value="Search" class="search" name="search" />
					<input type="submit" value="Search" class="hide" />
				</form>
			</fieldset>
		</div>
		<!-- Main Image -->
		<div id="main_image">
			<div id="map_canvas" style="height: 600px; width: 800px;"></div>
			<div id="frame_image_top"></div><div id="frame_image_bottom"></div>
			<hr />
		</div>
	</div>
	<!-- Footer -->
	<div id="footer_wrapper">
		<div id="footer">
		<div class="logo"><span></span></div>
			<ul>
				<li><a href="#" title="Home">Home</a></li>
				<li><a href="#" title="About">About</a></li>
				<li><a href="#" title="Services">Services</a></li>
				<li><a href="#" title="Contact">Contact</a></li>
			</ul>
		</div>
	</div>
</body>
</html>
